<template>
  <div class="home">
<!--    <NavBar /> &lt;!&ndash; 引入导航栏组件 &ndash;&gt;-->

    <main class="zhu">
      <section class="labor-education-section">
        <div class="section-footer">
          <img src="https://web-bd.ykt.eduyun.cn/img/1.f1cc3032.png?x-eos-process=image/format,webp" alt="一粥一饭当思来之不易，半丝半缕恒念物力维艰" class="footer-image">
        </div>

        <div class="content" v-if="main">
          <div class="section">
            <div class="section-content">
              <div class="link" @click="Glorious">
                <img src="https://basic.smartedu.cn/img/glory-bg.704a495a.png" alt="理论政策劳动榜样" class="link-image">
              </div>
              <div class="text-content">
              </div>
            </div>
          </div>
          <div class="section" @click="Navigation">
            <div class="section-content">
              <div class="link">
                <img src="https://basic.smartedu.cn/img/navigation-bg.f9ab103a.png" alt="资源公告设计示例" class="link-image">
              </div>
              <div class="text-content">
              </div>
            </div>
          </div>
          <div class="section" @click="Wisdom">
            <div class="section-content">
              <div class="link">
                <img src="https://basic.smartedu.cn/img/wisdom-bg.942a0404.png" alt="经验分享技艺揭秘" class="link-image">
              </div>
              <div class="text-content">
              </div>
            </div>
          </div>
        </div>
        <div class="navbar" v-if="!main">
          <div class="nav-item" :class="{ 'active-nav-item': activeNavItem === 'glory' }" @click="activateNavItem('glory')" @click.stop="Glorious"><img src="https://basic.smartedu.cn/img/glory.f0de3961.png" alt="劳动光荣"/> 劳动光荣</div>
          <div class="nav-item" :class="{ 'active-nav-item': activeNavItem === 'navigation' }" @click="activateNavItem('navigation')" @click.stop="Navigation"><img src="https://basic.smartedu.cn/img/navigation.b87fc79b.png" alt="劳动导航"/>劳动导航</div>
          <div class="nav-item" :class="{ 'active-nav-item': activeNavItem === 'wisdom' }" @click="activateNavItem('wisdom')" @click.stop="Wisdom"><img src="https://basic.smartedu.cn/img/wisdom.bfefea10.png" alt="劳动智慧"/>劳动智慧</div>
        </div>
        <div class="center" v-if="!main">
          <Gl v-if="glorious" />
          <Na v-if="navigation" />
          <Wi v-if="wisdom" />
        </div>
      </section>
      <!-- 其他板块... -->
    </main>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import NavBar from "@/components/NavBar.vue";
import Gl from "@/views/labor/Glorious.vue";
import Na from "@/views/labor/Navigation.vue";
import Wi from "@/views/labor/Wisdom.vue";
export default defineComponent({
  data() {
    return {
      // 其他数据...
      main: true,
      glorious: false,
      navigation: false,
      wisdom: false,
      activeNavItem: null, // 新增一个状态来跟踪当前激活的 nav-item
    }
  },
  components: {
    NavBar,
    Gl,
    Na,
    Wi,
  },
  methods: {
    activateNavItem(id) {
      this.activeNavItem = id;
    },
    Glorious() {
      // 理论政策劳动榜样
      this.activeNavItem = 'glory';
      this.main = false;
      this.glorious = true;
      this.navigation = false;
      this.wisdom = false;
    },
    Navigation() {
      // 资源公告设计示例
      this.activeNavItem = 'navigation';
      this.main = false;
      this.glorious = false;
      this.navigation = true;
      this.wisdom = false;
    },
    Wisdom() {
      // 经验分享技艺揭秘
      this.activeNavItem = 'wisdom';
      this.main = false;
      this.glorious = false;
      this.navigation = false;
      this.wisdom = true;
    }
  }
});
</script>

<style scoped>
/* 原有的样式保持不变 */
.center {
  width: 80%;
  background-color: #fff;
}
/* 新增样式 */
.zhu{
  background-color: #f2f2f2; /* 背景色 */
}

.logo img {
  width: 100px; /* Adjust based on actual image size */
}

.user-info {
  display: flex;
  align-items: center;
}

.logout-button {
  background-color: #f44336; /* Red background */
  color: white; /* White text */
  border: none; /* No border */
  padding: 5px 10px; /* Padding */
  cursor: pointer; /* Cursor changes to pointer */
  border-radius: 3px; /* Rounded corners */
}

.logout-button:hover {
  background-color: #d32f2f; /* Darker on hover */
}

.footer {
  text-align: center;
  padding: 10px 0;
  background-color: #f2f2f2;
}

.stats {
  text-align: center;
  margin-bottom: 10px;
  background-color: #f2f2f2; /* 单一灰色背景 */
  padding: 10px;
  border-radius: 5px;
}

.labor-education-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.content {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.section {
  flex: 1;
  margin: 0 10px;
  text-align: center;
}

.section h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.section-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.link-image {
  max-width: 60%;
  height: auto;
  cursor: pointer;
  margin-bottom: 10px;
}

.text-content p {
  margin: 5px 0;
  font-size: 16px;
  color: #333;
}

.enter {
  font-size: 14px;
  color: #007bff;
  cursor: pointer;
  margin-top: 10px;
}

.section-footer {
  width: 80%;
  margin-bottom: 20px;
}

.footer-image {
  width: 100%;
  height: auto;
  display: block; /* Remove extra space below the image */
}
.navbar {
  display: flex;
  justify-content: space-between; /* 确保子元素平均分布 */
  align-items: center; /* 垂直居中 */
  background-color: #f8f9fa;
  width: 80%; /* 设置导航栏宽度为80% */
  margin: 0 auto; /* 使导航栏居中 */
}

.nav-item {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  flex-direction: row; /* 子元素（图片和文字）排列在一行 */
  text-align: center; /* 文本居中 */
  padding: 20px; /* 内边距 */
  flex: 1; /* 占据相同的空间 */
  background-color: #ddd; /* 默认背景颜色 */
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
  cursor: pointer; /* 鼠标悬停时显示小手 */
}

.nav-item img {
  margin-right: 8px; /* 图片与文字之间的间距 */
}


.nav-item:hover {
  color: #007bff; /* 鼠标悬停时的字体颜色 */
  background-color: white; /* 鼠标悬停时的背景颜色 */
}

.nav-item:active {
  color: #007bff; /* 鼠标点击时的字体颜色 */
  background-color: white; /* 鼠标点击后保持白色背景 */
}
.active-nav-item {
  background-color: white !important; /* 确保背景色为白色 */
  color: #007bff !important; /* 确保字体颜色 */
}
</style>